﻿<div class="modal-body"
     ng-swipe-left="Lightbox.nextImage()"
     ng-swipe-right="Lightbox.prevImage()">
    <!-- navigation -->
    <div class="lightbox-nav">
        <!-- close button -->
        <button class="close" aria-hidden="true" ng-click="$dismiss()">×</button>

        <div class="btn-group" ng-if="Lightbox.images.length > 1">
            <a class="btn btn-xs btn-default" ng-click="Lightbox.prevImage()">
                ‹ Previous
            </a>

            <a ng-href="{{Lightbox.imageUrl}}" target="_blank"
               class="btn btn-xs btn-default" title="Open in new tab">
                Open image in new tab
            </a>

            <a class="btn btn-xs btn-default" ng-click="Lightbox.nextImage()">
                Next ›
            </a>
        </div>
    </div>

    <div class="lightbox-image-container">
        <!-- caption -->
        <div class="lightbox-image-caption">
            <span>{{Lightbox.imageCaption}}</span>
        </div>

        <!-- image -->
        <img ng-if="!Lightbox.isVideo(Lightbox.image)"
             lightbox-src="{{Lightbox.imageUrl}}">

        <!-- video -->
        <div ng-if="Lightbox.isVideo(Lightbox.image)"
             class="embed-responsive embed-responsive-16by9">
            <!-- video file embedded directly -->
            <video ng-if="!Lightbox.isSharedVideo(Lightbox.image)"
                   lightbox-src="{{Lightbox.imageUrl}}"
                   controls
                   autoplay="true"></video>

            <!-- video embedded with an external service using
                 `ng-videosharing-embed` -->
            <embed-video ng-if="Lightbox.isSharedVideo(Lightbox.image)"
                         lightbox-src="{{Lightbox.imageUrl}}"
                         ng-href="{{Lightbox.imageUrl}}"
                         iframe-id="lightbox-video"
                         class="embed-responsive-item">
                <a ng-href="{{Lightbox.imageUrl}}">Watch video</a>
            </embed-video>
        </div>
    </div>
</div>